<template>
  <el-dialog append-to-body
             title="交互配置"
             :visible.sync="dialogVisible"
             width="600px"
             @close="handleClose">

    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="事件" prop="event">
        <el-select v-model="form.event" clearable>
          <el-option v-for="item in eventList" :key="item.code"
                     :value="item.code"
                     :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="行为" prop="type">
        <el-select v-model="form.actionType" clearable>
          <el-option v-for="item in actionTypeList" :key="item.name"
                     :value="item.name"
                     :label="item.title"
          ></el-option>
        </el-select>
      </el-form-item>

      <!--组件样式-->
      <component ref="action" v-if="form.actionType" :is="form.actionType" :data="form" />

    </el-form>


    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import actionMgr from './actionMgr'
  export default {
    components: {},
    props: {
      action: {
        type: Object
      }
    },
    data() {
      return {
        dialogVisible: true,
        eventList: [{
          code: 'click',
          name: '单击'
        }],
        actionTypeList: [],
        form: {
          event: 'click',
          actionType: '',
          url: ''
        },
        dataSourceList: [],
        dataSourceComponent: ''
      }
    },
    computed: {
    },
    created() {
      this.form = Object.assign(this.form, this.action);
      this.actionTypeList = actionMgr.list;
    },
    methods: {
      handleClose() {
        this.$emit('close');
      },
      handleSubmit() {
        const data = this.$refs.action.getForm();
        Object.assign(this.form, data);
        this.$emit('success', this.form);

      }
    }
  }
</script>
